<template>
  <div class="back-button-container" v-if="isShow" @click="handleClick">返回</div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const isShow = computed(() => !["/", "/poster"].includes(route.path));

function handleClick() {
  router.back();
}
</script>

<style scoped lang="scss">
@import "@/css/respondMixin";

.back-button-container {
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  background-color: rgba(0, 150, 136, 0.5);
  position: fixed;
  right: 8%;
  bottom: 4%;
  z-index: 99999;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 1);
  color: #fff;
  font-weight: bold;
  font-size: 0.4rem;

  @include respond-to("phone") {
    display: block;
  }
}
</style>
